<template>
    <div class="motorFactory" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
        <div class="title" v-if="chineseArr.fourteen || englishArr.fourteen">
            <div class="logo" @click="goChooseBoard" v-focusable></div>
            <div :class="languageStr==='English'?'content':'encontent'">
                <span>{{ languagePack.fourteen }}</span>
            </div>
            <div class="timer">
                <span>{{ time }}</span>
            </div>
            <div class="laugBox">
                <div class="changeLau" @click="changeLaug" v-focusable>
                    <img width="38px" v-if="languageStr==='简体中文'" src="~images/bigScreen/motorFactory/china.png"
                         alt/>
                    <img width="38px" v-if="languageStr==='English'" src="~images/bigScreen/motorFactory/english.png"
                         alt/>
                    <span>{{ languageStr }}</span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="leftCol">
                <div class="changeIcon">
                    <span class="icontext">{{ languagePack.one }}</span>
                </div>
                <div class="list">
                    <template v-for="(item,index) of devList">
                        <div class="devItem"
                             v-focusable
                             :key="index"
                             :class="item.pointer?'devItemCheck':''"
                             @click="changeDev(item,'点击')">
                            <div class="machine">
                              <span v-if="languageStr === 'English'">
                                {{ item.deviceName }}
                              </span>
                              <span v-else>
                                {{ item.deviceEnglishName }}
                              </span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="rightCol">
                <div class="smallBox">
                    <div class="oneBox">
                        <div class="updownitem">
                            <img width="100px" v-if="devShowItem.state===1"
                                 src="~images/bigScreen/motorFactory/devGreen.png" alt/>
                            <img width="100px" v-if="devShowItem.state===2"
                                 src="~images/bigScreen/motorFactory/LampYellow.png" alt/>
                            <img width="100px" v-if="devShowItem.state===5"
                                 src="~images/bigScreen/motorFactory/devRed.png" alt/>
                            <img width="100px" v-if="devShowItem.state===-99"
                                 src="~images/bigScreen/motorFactory/devDark.png" alt/>
                        </div>
                        <div class="updownitem" style="position: relative">
                            <span class="upitem">{{ languagePack.two }}</span>
                            <span class="downitem" v-if="devShowItem.state===1">{{ languagePack.sixteen }}</span>
                            <span class="downitem" v-if="devShowItem.state===2">{{ languagePack.seventeen }}</span>
                            <span class="downitem" v-if="devShowItem.state===5">{{ languagePack.eighteen }}</span>
                            <span class="downitem" v-if="devShowItem.state===-99">{{ languagePack.nineteen }}</span>
                          <p class="faultMessage">{{devShowItem.faultMessage}}</p>
                        </div>
                        <div class="updownitem">
                            <span class="upitem">{{ languagePack.thirteen }}</span>
                            <span class="downitem">{{ devShowItem.durationString || 0 }}</span>
                          <p class="faultMessage"></p>
                        </div>
                        <div class="updownitem">
                            <div class="shuitem"></div>
                        </div>
                        <div class="updownitem">
                            <!-- <span class="upitem1">{{ devShowItem.deviceName }}</span> -->
                            <span class="upitem1" v-if="languageStr === 'English'">
                                {{ devShowItem.deviceName }}
                            </span>
                            <span class="upitem1" v-else>
                                {{ devShowItem.deviceEnglishName }}
                            </span>
                            <span class="downitem1">{{ languagePack.fifteen }}:{{ devShowItem.deviceNo }}</span>
                        </div>
                    </div>
                    <div class="twoBox">
                        <div :class="languageStr==='English'?'shubox':'shubox1'">
                            <span>{{ languagePack.three }}</span>
                        </div>
                        <div>
                            <img width="60px" src="~images/bigScreen/motorFactory/numicon.png" alt/>
                        </div>
                        <div class="hengbox">
                            <span>{{ devItem.deviceType==='手动折弯机'?languagePack.four1:languagePack.four }}</span>
                        </div>
                        <div class="singleImg" v-for="(item2,index) of yeildArr" :key="index"><span>{{ item2 }}</span>
                        </div>
                        <div class="hengbox1">
                            <span>PCS</span>
                        </div>
                    </div>
                </div>
                <div class="smallBox">
                    <div class="boxtitle">
                        <span class="chinese">{{ languagePack.ten }}</span>
                    </div>
                    <div class="chartBox">
                        <div class="leftBox" id="statusRatio"></div>
                        <div class="singleBox">
                            <div class="singleprogress">
                                <div class="procontent">
                                    <span>{{ languagePack.sixteen }} {{ statusObj.runRatio || 0 }}%</span>
                                    <span>{{ statusObj.runTime }}min</span>
                                </div>
                                <Progress :percent="statusObj.runRatio" hide-info stroke-color="rgb(55,211,118)"/>
                            </div>
                            <div class="singleprogress">
                                <div class="procontent">
                                    <span>{{ languagePack.seventeen }} {{ statusObj.waitRatio || 0 }}%</span>
                                    <span>{{ statusObj.waitTime }}min</span>
                                </div>
                                <Progress :percent="statusObj.waitRatio" hide-info stroke-color="rgb(254,130,83)"/>
                            </div>
                            <div class="singleprogress">
                                <div class="procontent">
                                    <span>{{ languagePack.eighteen }} {{ statusObj.alarmRatio || 0 }}%</span>
                                    <span>{{ statusObj.alarmTime }}min</span>
                                </div>
                                <Progress :percent="statusObj.alarmRatio" hide-info stroke-color="rgb(247,28,47)"/>
                            </div>
                            <div class="singleprogress">
                                <div class="procontent">
                                    <span>{{ languagePack.nineteen }} {{ statusObj.shutdownRatio || 0 }}%</span>
                                    <span>{{ statusObj.shutdownTime }}min</span>
                                </div>
                                <Progress :percent="statusObj.shutdownRatio" hide-info stroke-color="rgb(92,105,141)"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="smallBox">
                    <div class="boxtitle">
                        <span class="chinese">{{ devItem.deviceType==='手动折弯机'?languagePack.nine1:languagePack.nine }}</span>
                        <div class="titleIcon">
                            <div class="iconContent">
                                <span>{{ devItem.deviceType==='手动折弯机'?languagePack.four1:languagePack.four }}</span>
                                <img width="30px" src="~images/bigScreen/motorFactory/yeildicon.png" alt/>
                            </div>
                        </div>
                    </div>
                    <div class="chartBox" id="sevenDayYeild"></div>
                </div>
                <div class="bigBox">
                    <div class="edgeBox">
                          <div class="standardBeat">
                            <span class="label">{{languagePack.stardBeat}}</span><span class="txt">{{ devShowItem.cycleCount }}</span><span class="unit"> {{languagePack.secDate}}</span>
                          </div>
                          <div class="classOeeBox" id="classOEE"></div>
                        <div class="apqloss">
                            <div class="apqtitle">{{ languagePack.three }}APQ</div>
                            <div class="apqBox">
                                <div class="apqsingle">
                                    <span class="apqname">A</span>
                                    <span class="apqnum">{{ devShowItem.a || 0 }}%</span>
                                </div>
                                <div class="apqsingle">
                                    <span class="apqname">P</span>
                                    <span class="apqnum">{{ devShowItem.p || 0 }}%</span>
                                </div>
                                <div class="apqsingle">
                                    <span class="apqname">Q</span>
                                    <span class="apqnum">{{ devShowItem.q || 0 }}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="centerBox">
                      <span class="imgBox">
                          <img :src="devItem.filePath" alt/>
                      </span>
                    </div>
                    <div class="edgeBox1">
                        <div class="upcollect">
                          <span class="imgBox">
                             <img src="~images/bigScreen/motorFactory/collectIcon.png" alt/>
                          </span>
                            <div class="uptitle">
                                <span class="uptitleup">{{ languagePack.eleven }}</span>
                                <!-- <span class="uptitledown">
                                 {{ devShowItem.deviceName }}
                                </span> -->
                                <span class="uptitledown" v-if="languageStr === 'English'">
                                    {{ devShowItem.deviceName }}
                                </span>
                                <span class="uptitledown" v-else>
                                    {{ devShowItem.deviceEnglishName }}
                                </span>
                            </div>
                        </div>
                        <div class="downcollect">
                            <!-- <div class="singlecolImg" v-for="(item3,index) of collectArr" :key="index">
                                <span>{{item3.name}}</span>
                                <span>{{item3.value}}</span>
                            </div> -->
                            <vue-seamless-scroll :data="collectObj"
                                                 class="seamless-warp size"
                                                 :class-option="classOption"
                                                 v-if="collectObj.length > 0">
                                <template v-for="(item,index) in collectObj">
                                    <div class="singlecolImg" :key="index">
                                        <span class="singleKeyL">{{ item.key }}</span>
                                        <span class="singleKeyR">{{ item.value }}</span>
                                    </div>
                                </template>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
                <div class="smallBox">
                    <div class="boxtitle">
                        <span class="chinese">{{ languagePack.eight }}</span>
                        <div class="titleIcon">
                            <div class="iconContent">
                                <span>OEE</span>
                                <img width="30px" src="~images/bigScreen/motorFactory/dayoeeicon.png" alt/>
                            </div>
                        </div>
                    </div>
                    <div class="chartBox" id="sevenDayOEE"></div>
                </div>
                <div class="smallBox">
                    <div class="boxtitle">
                        <span class="chinese">{{ languagePack.five }}</span>
                        <div class="titleIcon">
                            <div class="iconContent">
                                <span>OEE</span>
                                <img width="30px" src="~images/bigScreen/motorFactory/timeoeeicon.png" alt/>
                            </div>
                        </div>
                    </div>
                    <div class="sectionBox">
                        <div class="boxBorder">
                            <div class="initChart" v-for="(item,index) of devStatusRecords" :key="'after'+index"
                                 :style="item | formatStyle">

                            </div>
                        </div>
                        <div class="boxTime">
                            <span>{{ statusTImeArr.startTime }}</span>
                            <span>{{ statusTImeArr.endTime }}</span>
                        </div>
                    </div>
                    <div class="chartBox1" id="timeOEE"></div>
                </div>
                <div class="smallBox">
                    <div class="boxtitle">
                        <span class="chinese">{{ languagePack.six }}</span>
                        <div class="titleIcon">
                            <div class="iconContent">
                                <span>MTBF</span>
                                <img width="30px" src="~images/bigScreen/motorFactory/mtbficon.png" alt/>
                            </div>
                            <div class="iconytd">
                                <span
                                    style="margin-right:10px">{{
                                        this.languageStr === 'English' ? '当年YTD值' : 'YTD'
                                    }}</span>
                                <span>{{ mtbfYtd }}/h</span>
                            </div>
                        </div>
                    </div>
                    <div class="chartBox" id="mtbfechart"></div>
                </div>
                <div class="smallBox">
                    <div class="boxtitle">
                        <span class="chinese">{{ languagePack.seven }}</span>
                        <div class="titleIcon">
                            <div class="iconContent">
                                <span>MTTR</span>
                                <img width="30px" src="~images/bigScreen/motorFactory/mttricon.png" alt/>
                            </div>
                            <div class="iconytd">
                                <span
                                    style="margin-right:10px">{{
                                        this.languageStr === 'English' ? '当年YTD值' : 'YTD'
                                    }}</span>
                                <span>{{ mttrfYtd }}/min</span>
                            </div>
                        </div>
                    </div>
                    <div class="chartBox" id="mttrechart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts';

let moment = window.$this.moment;
let myChart, myChart1, myChart2, myChart3, myChart4, myChart5, myChart6, myChart7;
export default {
    name: "motorFactory",
    components: {vueSeamlessScroll},
    computed: {
        classOption() {
            return {
                step: 0.3,
                limitMoveNum: 5,
                hoverStop: false,
                direction: 1,
                openWatch: true,
                singleHeight: 0,
                singleWidth: 0,
                waitTime: 1500
            }
        }
    },
    data() {
        return {
            devStatusRecords: [],
            time: '',
            devList: [],
            devItem: {},
            pageNum: 1,
            pageSize: 99,
            scaleNum: '',
            chineseArr: {
                one: '设备列表',
                two: '当前状态',
                three: '当前班次',
                four: '产量',
                five: '当天设备整点OEE',
                six: '设备MTBF分析',
                seven: '设备MTTR分析',
                eight: '当月每日OEE',
                nine: '过去7天产量',
                ten: '当前班次设备状态占比',
                eleven: '设备采集信息',
                twelve: '单位',
                thirteen: '持续时长',
                fourteen: '未知',
                fifteen: '设备编号',
                sixteen: '运行',
                seventeen: '待机',
                eighteen: '报警',
                nineteen: '断线',
                four1: '折弯次数',
                nine1: '过去7天折弯次数',
                stardBeat:"标准节拍",
                secDate:"秒/次"
            },
            englishArr: {
                one: 'Equipment List',
                two: 'Status',
                three: 'Shift ',
                four: 'Output',
                five: 'Hourly OEE',
                six: 'MTBF',
                seven: 'MTTR',
                eight: 'Daily OEE',
                nine: 'Output during past 7 days',
                ten: 'Status Ratio',
                eleven: 'Key Parameter',
                twelve: 'Unit',
                thirteen: 'Duration',
                fourteen: 'Unknown',
                fifteen: 'Equipment No',
                sixteen: 'Running',
                seventeen: 'Waiting',
                eighteen: 'Alarming',
                nineteen: 'Stopping',
                four1: 'Bending ',
                nine1: 'Bending during past 7 days',
                stardBeat:"Beat",
                secDate:"Sec/Time"
            },
            languageStr: 'English',
            languagePack: {},
            devShowItem: {},
            yeildArr: [],
            hierarchyCode: 'UPB5IESF6HVNDSWXENITEK25N',
            statusTImeArr: {},
            collectArr: [],
            collectObj: [],
            statusObj: {},
            timer1: null,
            selectDev: 0,
            mtbfYtd: '',
            mttrfYtd: '',
            languageShowF: false
        }
    },
    mounted() {


    },
    activated() {

      if (window.localStorage.getItem('language') === 'en_US') {
        this.languageStr = '简体中文'
        this.languagePack = this.englishArr
        this.$i18n.locale = 'en_US'
      } else {
        this.languageStr = 'English'
        this.languagePack = this.chineseArr
        this.$i18n.locale = 'zh_CN'
      }

        this.$tv.findFocusType = 0;
        this.$tv.initDis = 49
        this.$tv.offsetDistance = 50
        let queryInfo = this.$route.query
        if (queryInfo && queryInfo.hierarchyCode) {
            this.hierarchyCode = queryInfo.hierarchyCode
        }
        this.getName()
        // this.languagePack = this.chineseArr
        this.getDevList();
        this.onresize()
        window.addEventListener('resize', this.onresize, false);
        this.timer2 = setInterval(this.autoScroll, 60000);
        this.$nextTick(() => {
            this.$tv.scrollEl = this.$tv.getElementByPath('//div[@class="list"]')
        })
    },
    methods: {
        getName() {
            this.axios({
                method: 'post',
                url: '/dms/large/screen/detail',
                data: {
                    url: this.$router.history.current.fullPath
                }
            }).then(res => {
                if (res.code === 200) {
                    if(res.data&&res.data!==null){
                        this.chineseArr.fourteen = res.data.titleCN
                        this.englishArr.fourteen = res.data.titleEN
                    }
                    this.languagePack = this.chineseArr
                }
            })
        },
        goChooseBoard() {
            this.$router.push({path: '/chooseBoard'})
        },
        //切换语言
        changeLaug() {
            if (this.languageStr === 'English') {
                this.languageStr = '简体中文'
                this.languagePack = this.englishArr
               window.localStorage.setItem('language','en_US')
            } else {
                this.languageStr = 'English'
                this.languagePack = this.chineseArr

               window.localStorage.setItem('language','zh_CN')
            }
            this.changeDevTimer()
        },
        //计算缩放
        onresize() {
            const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
            const scaleW = Width < 1920 ? (Width / 1920) : 1;
            const scaleH = Height < 1080 ? (Height / 1080) : 1;
            this.scaleNum = scaleW > scaleH ? scaleH : scaleW
        },
        //设备列表
        getDevList() {
            // todo 通力生产环境 需要更换成  'UPB5IESF6HVNDSWHZ72X4MS64'
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                // hierarchyCode: 'UPB5IESF6HVNDSWXENITEK25N'
                hierarchyCode: this.hierarchyCode
            }
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/findAllDevice',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.devList = res.data.list.map(item => {
                        return {
                            ...item,
                            pointer: false,
                            filePath:this.util.filePathToUrl(item.filePath)
                        }
                    })
                    if (this.devList.length > 0) {
                        this.changeDev(this.devList[0])
                    }
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //自动滚动
        autoScroll() {
            this.selectDev += 1
            if (this.selectDev >= this.devList.length) {
                this.selectDev = 0
                this.getDevList()
            } else {
                this.changeDev(this.devList[this.selectDev])
            }

        },
        //切换设备定时器
        changeDevTimer() {
            this.getMTBF(this.devItem.deviceNo)
            this.getMTTR(this.devItem.deviceNo)
            this.getSevenDayYeild(this.devItem.deviceId)
            this.getDevState(this.devItem.deviceId, this.devItem.deviceNo, this.devItem.deviceName,this.devItem.deviceEnglishName)
            this.getstatusRatio(this.devItem.deviceId)
            this.gettimeOEE(this.devItem.deviceId)
            this.getsevenDayOEE(this.devItem)
            this.getCollectInfo(this.devItem.deviceId)
        },
        //切换设备调用
        changeDev(item, type) {
            this.languageShowF = false
            for (let i = 0; i < this.devList.length; i++) {
                if (this.devList[i].deviceId === item.deviceId) {
                    if (type === '点击') {
                        clearInterval(this.timer2);
                        this.timer2 = setInterval(this.autoScroll, 60000);
                    }
                    this.selectDev = i
                    this.devList[i].pointer = true
                    this.devItem = {...item}
                    this.changeDevTimer()
                    // clearInterval(this.timer2);
                    // this.timer2 = setInterval(this.changeDevTimer, 180000);
                } else {
                    this.devList[i].pointer = false
                }
            }
        },
        //采集信息
        getCollectInfo(id) {
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/deviceField',
                params: {
                    deviceId: id,
                }
            }).then(res => {
                if (res.code === 200) {
                    // if(res.data.dataColTime){
                    //     delete res.data.dataColTime
                    // }
                    // let arr=[]
                    // for(let i=0;i<Object.keys(res.data).length;i++){
                    //     arr.push({name:Object.keys(res.data)[i],value:res.data[Object.keys(res.data)[i]]})
                    // }
                    // this.collectArr = arr
                    // this.collectObj = res.data
                    if (res.data) {
                        let data = res.data.map((item) => {
                            return {key: item.attrChineseName, value: item.attributeValue};
                        })
                        this.collectObj = data
                    }
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //当前设备状态
        getDevState(id, deviceNo, deviceName,deviceEnglishName) {
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/deviceState',
                params: {
                    deviceId: id,
                }
            }).then(res => {
                if (res.code === 200) {
                    this.devShowItem = {...res.data, deviceNo, deviceName,deviceEnglishName}
                    this.yeildArr = this.padding1(res.data.yield, 4).toString().split("")
                    this.classOEEChart(res.data.oee)
                    const dateInfo = res.data.now
                    this.time = dateInfo
                    clearInterval(this.timer1);
                    let timeNum = Number(new Date(dateInfo).getTime())
                    this.timer1 = setInterval(() => {
                        timeNum += 1000
                        this.time = this.$moment(new Date(timeNum)).format('YYYY-MM-DD HH:mm:ss');
                    }, 1000)
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //产量补0
        padding1(num, length) {
            for (let len = (num + "").length; len < length; len = num.length) {
                num = "0" + num;
            }
            return num;
        },
        //过去七日产量接口
        getSevenDayYeild(id) {
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/yield/seven',
                params: {
                    deviceId: id,
                }
            }).then(res => {
                if (res.code === 200) {
                    let xDay = Object.keys(res.data).map((item) => {
                        return item.substring(5, 10);
                    })
                    this.sevenDayYeildChart(xDay, Object.values(res.data))
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //过去七日产量
        sevenDayYeildChart(x, y) {
            if (myChart != null && myChart != "" && myChart != undefined) {
                myChart.dispose(); //销毁
            }
            myChart = echarts.init(document.getElementById("sevenDayYeild"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    axisLabel: {
                        color: "rgb(233, 233, 233)"
                    },
                    axisTick: { //轴刻度线
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    name: this.languageStr === 'English' ? '单位:PCS' : 'Unit:PCS',
                    // nameTextStyle: {
                    //     padding: [0, y.length>0?55:0, 0, 0] // 上右下左与原位置距离
                    // },
                    axisLabel: {
                        formatter: '{value}',
                        color: "rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgb(42,74,104)'
                        }
                    }
                },
                series: [
                    {
                        data: y,
                        type: 'bar',
                        barWidth: '20%',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: 'rgba(0,166,240,1)'},
                                    {offset: 0.5, color: 'rgba(0,202,246,1)'},
                                    {offset: 1, color: 'rgba(2,235,247,1)'}
                                ]),
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                            },
                        },
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //当月oee接口
        getsevenDayOEE(item) {
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/oee/sameMonth',
                params: {
                    deviceId: item.deviceId,
                }
            }).then(res => {
                if (res.code === 200) {
                    let xdata = Object.keys(res.data).map((item) => {
                        return item.substring(5, 10);
                    })
                    let ydata = Object.values(res.data)
                    let yarr = []
                    for (let i = 0; i < xdata.length; i++) {
                        yarr.push([xdata[i], ydata[i]])
                    }
                    let arr = Object.keys(res.data)
                    let startgap = 0
                    if (arr.length > 0) {
                        const now = this.$moment(this.time).format('YYYY-MM-DD 00:00:00')
                        const first = this.$moment(arr[0]).format('YYYY-MM-DD HH:mm:ss')
                        const gap = (new Date(now) - new Date(first)) / 86400000
                        const half = Math.ceil(arr.length / 2)
                        if (gap >= parseInt(half / 2)) {
                            startgap = parseInt((gap - parseInt(half / 2)) / arr.length * 100)
                        }
                    }
                    this.sevenDayOEEChart(xdata, yarr, item, startgap)
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //七日OEE
        sevenDayOEEChart(x, y, item, startgap) {
            if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
                myChart1.dispose(); //销毁
            }
            myChart1 = echarts.init(document.getElementById("sevenDayOEE"));
            let gap = startgap > 50 ? 50 : startgap
            myChart1.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                grid: {
                    left: '1%',
                    right: '8%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: x,
                    axisLabel: {
                        color: "rgb(233, 233, 233)"
                    },
                    axisTick: { //轴刻度线
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}%',
                        color: "rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: false,
                        // show: true,
                        // lineStyle: {
                        //     type: 'dashed',
                        //     color:'rgb(42,74,104)'
                        // }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: gap,
                        end: gap + 50,
                    },
                ],
                series: [
                    {
                        name: 'OEE',
                        type: 'effectScatter',
                        itemStyle: {
                            color: 'rgb(2,237,246)'
                        },
                        symbolSize: 8,
                        markLine: {
                            symbol: "none",
                            data: [
                                {
                                    name: '基准线',
                                    yAxis: item.controlMin,
                                    lineStyle: {
                                        normal: {
                                            color: "rgb(142,60,94)",
                                            width: 1,
                                        }
                                    },
                                    label: {
                                        show: true,
                                        position: 'end',
                                        formatter: 'LSL',
                                        color: "rgb(202, 202, 202)",
                                    }
                                },
                                {
                                    name: '基准线',
                                    yAxis: item.standardMin,
                                    lineStyle: {
                                        normal: {
                                            color: "rgb(134,145,96)",
                                            width: 1,
                                        }
                                    },
                                    label: {
                                        show: true,
                                        position: 'end',
                                        formatter: 'LCL',
                                        color: "rgb(202, 202, 202)",
                                    }
                                },
                                {
                                    name: '基准线',
                                    yAxis: item.standard,
                                    lineStyle: {
                                        normal: {
                                            color: "rgb(56,162,116)",
                                            width: 2,
                                            type: "solid",
                                        }
                                    },
                                    label: {
                                        show: true,
                                        position: 'end',
                                        formatter: 'CL',
                                        color: "rgb(202, 202, 202)",
                                    }
                                },
                                {
                                    name: '基准线',
                                    yAxis: item.controlMax,
                                    lineStyle: {
                                        normal: {
                                            color: "rgb(134,145,96)",
                                            width: 1,
                                        }
                                    },
                                    label: {
                                        show: true,
                                        position: 'end',
                                        formatter: 'UCL',
                                        color: "rgb(202, 202, 202)",
                                    }
                                },
                                {
                                    name: '基准线',
                                    yAxis: item.standardMax,
                                    lineStyle: {
                                        normal: {
                                            color: "rgb(142,60,94)",
                                            width: 1,
                                        }
                                    },
                                    label: {
                                        show: true,
                                        position: 'end',
                                        formatter: 'USL',
                                        color: "rgb(202, 202, 202)",
                                    }
                                },
                            ]
                        },
                        data: y.length > 0 ? y : [['7/13', 50], ['7/14', 40], ['7/15', 30], ['7/16', 66], ['7/17', 77], ['7/18', 54], ['7/19', 33]],
                    },
                ]
            });
            window.addEventListener("resize", function () {
                myChart1.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //设备整点oee接口
        gettimeOEE(id) {
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/oee/sameDay',
                params: {
                    deviceId: id,
                }
            }).then(res => {
                if (res.code === 200) {
                    let total = ''
                    if (res.data.deviceStateDtoList.length > 1) {
                        total = moment(res.data.deviceStateDtoList[res.data.deviceStateDtoList.length - 1].endTime) - moment(res.data.deviceStateDtoList[0].startTime)
                        this.statusTImeArr = {
                            startTime: res.data.deviceStateDtoList[0].startTime.substring(10, 16),
                            endTime: res.data.deviceStateDtoList[res.data.deviceStateDtoList.length - 1].endTime.substring(10, 16),
                        }
                    }
                    let stateList = res.data.deviceStateDtoList.map((item) => {
                        let widthValue = (moment(item.endTime) - moment(item.startTime)) / total * 100
                        return {...item, 'Width': widthValue};
                    })
                    this.devStatusRecords = stateList
                    this.timeOEEChart(Object.keys(res.data.oeeSomeDay), Object.values(res.data.oeeSomeDay), Math.max.apply(null, Object.values(res.data.oeeSomeDay)))
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //当天设备整点OEE
        timeOEEChart(x, y, max) {
            if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
                myChart2.dispose(); //销毁
            }
            myChart2 = echarts.init(document.getElementById("timeOEE"));
            myChart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: x.length > 0 ? x : ['09', '10', '11', '12', '13', '14', '15'],
                    axisLabel: {
                        color: "rgb(233, 233, 233)"
                    },
                    axisTick: { //轴刻度线
                        show: false
                    },
                },
                yAxis: {
                    min: 0,
                    max: max > 100 ? max : 100,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}%',
                        color: "rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgb(42,74,104)'
                        }
                    }
                },
                series: [
                    {
                        data: y.length > 0 ? y : [0, 0, 0, 0, 0, 0, 0],
                        type: 'line',
                        // smooth: true
                        symbol: "circle",
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: "rgb(4,180,239)",
                                borderColor: "#ffffff",
                                borderType: "solid",
                                borderWidth: 2,
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                            },
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(4,180,239,0.7)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(4,180,239,0.1)'
                                }
                            ])
                        },
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart2.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //mtbf接口
        getMTBF(deviceNo) {
            this.axios({
                method: 'get',
                url: '/dms/statistical/mtbfInfo',
                params: {
                    deviceNo: deviceNo,
                    orgCode: this.hierarchyCode,
                    type: 0,
                    startDate: '',
                    endDate: '',
                }
            }).then(res => {
                if (res.code === 200) {
                    this.mtbfYtd = res.data.ytd
                    let xData = res.data.mtbfVoList.map((item) => {
                        return item.applyDate.substring(5, 10);
                    })
                    let yData = res.data.mtbfVoList.map((item) => {
                        return item.mtbf;
                    })
                    this.mtbfChart(xData, yData)
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //mtbf
        mtbfChart(xData, yData) {
            if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
                myChart3.dispose(); //销毁
            }
            myChart3 = echarts.init(document.getElementById("mtbfechart"));
            myChart3.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        color: "rgb(233, 233, 233)"
                    },
                    axisTick: { //轴刻度线
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    name: this.languageStr === 'English' ? '单位:小时' : 'Unit:hour',
                    axisLabel: {
                        formatter: '{value}',
                        color: "rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgb(42,74,104)'
                        }
                    }
                },
                series: [
                    {
                        data: yData,
                        type: 'line',
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: "rgb(10,135,233)",
                                borderColor: "#ffffff",
                                borderType: "solid",
                                borderWidth: 2,
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                            },
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(10,135,233,0.7)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(10,135,233,0.1)'
                                }
                            ])
                        },
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart3.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //mttr接口
        getMTTR(deviceNo) {
            this.axios({
                method: 'get',
                url: '/dms/statistical/mttrInfo',
                params: {
                    deviceNo: deviceNo,
                    orgCode: this.hierarchyCode,
                    type: 0,
                    startDate: '',
                    endDate: '',
                }
            }).then(res => {
                if (res.code === 200) {
                    this.mttrfYtd = res.data.ytd
                    let xData = res.data.mttrVoList.map((item) => {
                        return item.applyDate.substring(5, 10);
                    })
                    let yData = res.data.mttrVoList.map((item) => {
                        return item.mttr;
                    })
                    this.mttrChart(xData, yData)
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //mttr
        mttrChart(xData, yData) {
            if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
                myChart4.dispose(); //销毁
            }
            myChart4 = echarts.init(document.getElementById("mttrechart"));
            myChart4.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        color: "rgb(233, 233, 233)"
                    },
                    axisTick: { //轴刻度线
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    name: this.languageStr === 'English' ? '单位:分钟' : 'Unit:minute',
                    axisLabel: {
                        formatter: '{value}',
                        color: "rgb(202, 202, 202)"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgb(42,74,104)'
                        }
                    }
                },
                series: [
                    {
                        data: yData,
                        type: 'line',
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: "rgb(4,175,124)",
                                borderColor: "#ffffff",
                                borderType: "solid",
                                borderWidth: 2,
                                label: {
                                    formatter: "{c}",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontSize: "12",
                                        color: "#fff"
                                    }
                                }
                            },
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(4,175,124,0.7)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(4,175,124,0.1)'
                                }
                            ])
                        },
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart4.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //当班OEE APQ
        classOEEChart(oee) {
            if (myChart5 != null && myChart5 != "" && myChart5 != undefined) {
                myChart5.dispose(); //销毁
            }
            myChart5 = echarts.init(document.getElementById("classOEE"));
            myChart5.setOption({
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '55%'],
                        splitNumber: 5,
                        itemStyle: {
                            // shadowBlur: 10,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: 'rgba(5,90,237,1)',
                                },
                                {
                                    offset: 0.5,
                                    color: 'rgba(0,168,245,1)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0,168,245,1)',
                                },
                            ])
                        },
                        progress: {
                            show: true,
                            width: 25,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 25,
                                color: [[1, 'rgb(3,42,93)']]
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 0,
                        },
                        pointer: {
                            show: false
                        },
                        axisLabel: {
                            // distance: -5,
                            show: false,
                            color: '#fff',
                            fontSize: 12,
                        },
                        title: {
                            offsetCenter: [0, '-15%'],
                            fontSize: 16,
                            color: 'rgb(0,168,245)'
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 22,
                            offsetCenter: [0, '20%'],
                            formatter: function (value) {
                                return value + '%';
                            },
                            color: '#fff'
                        },
                        data: [
                            {
                                name: this.languageStr === 'English' ? '设备OEE' : 'OEE',
                                value: oee
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '55%'],
                        radius: '60%',
                        itemStyle: {
                            color: 'rgba(0,168,245,0.7)',
                        },
                        progress: {
                            show: true,
                            width: 2
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                width: 2
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        data: [
                            {
                                value: 100
                            }
                        ]
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart5.resize(); //myChart指自己定义的echartsDom对象
            });
        },
        //状态占比接口
        getstatusRatio(id) {
            this.axios({
                method: 'get',
                url: '/dms/performanceBoard/deviceStateProportion',
                params: {
                    deviceId: id,
                }
            }).then(res => {
                if (res.code === 200) {
                    let obj = {}
                    for (let item of res.data) {
                        if (item.state === 1) {
                            obj.runTime = item.stateDuration
                            obj.runRatio = Number(item.ratio)
                        }
                        if (item.state === 2) {
                            obj.waitTime = item.stateDuration
                            obj.waitRatio = Number(item.ratio)
                        }
                        if (item.state === 5) {
                            obj.alarmTime = item.stateDuration
                            obj.alarmRatio = Number(item.ratio)
                        }
                        if (item.state === -99) {
                            obj.shutdownTime = item.stateDuration
                            obj.shutdownRatio = Number(item.ratio)
                        }
                    }
                    this.statusObj = obj
                    let arr = res.data.map((item) => {
                        if (item.state === 1) {
                            return {value: item.stateDuration, name: '运行', itemStyle: {color: '#30c368'}}
                        } else if (item.state === 2) {
                            return {value: item.stateDuration, name: '待机', itemStyle: {color: '#f39a00'}}
                        } else if (item.state === 5) {
                            return {value: item.stateDuration, name: '报警', itemStyle: {color: '#e93446'}}
                        } else if (item.state === -99) {
                            return {value: item.stateDuration, name: '断线', itemStyle: {color: '#6d95b5'}}
                        } else {
                            return {value: item.stateDuration, name: '断线', itemStyle: {color: '#6d95b5'}}
                        }
                    })
                    let arr1 = res.data.map((item) => {
                        if (item.state === 1) {
                            return {value: item.stateDuration, name: '运行', itemStyle: {color: 'rgb(43,171,93)'}}
                        } else if (item.state === 2) {
                            return {value: item.stateDuration, name: '待机', itemStyle: {color: 'rgb(190,106,56)'}}
                        } else if (item.state === 5) {
                            return {value: item.stateDuration, name: '报警', itemStyle: {color: 'rgb(194,52,59)'}}
                        } else if (item.state === -99) {
                            return {
                                value: item.stateDuration,
                                name: '断线',
                                itemStyle: {color: 'rgba(109,149,181,0.7)'}
                            }
                        } else {
                            return {
                                value: item.stateDuration,
                                name: '断线',
                                itemStyle: {color: 'rgba(109,149,181,0.7)'}
                            }
                        }
                    })
                    this.statusRatioChart(arr, arr1)
                } else {
                    //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                }
            })
        },
        //状态占比
        statusRatioChart(arr, arr1) {
            if (myChart6 != null && myChart6 != "" && myChart6 != undefined) {
                myChart6.dispose(); //销毁
            }
            myChart6 = echarts.init(document.getElementById("statusRatio"));
            myChart6.setOption({
                color: ['#30c368', '#f39a00', '#e93446', '#6d95b5'],
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '50%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: arr
                    },
                    {
                        type: 'pie',
                        radius: ['20%', '31%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: arr1
                    }
                ]
            });
            window.addEventListener("resize", function () {
                myChart6.resize(); //myChart指自己定义的echartsDom对象
            });
        }
    },
    filters: {
        formatStyle(item) {
            let style = ''
            switch (item.state) {
                case 1:
                    style = 'background: rgb(55,211,118);';
                    break;
                case 2:
                    style = 'background: rgb(254,130,83);';
                    break;
                case -99:
                    style = 'background: rgb(92,105,141);';
                    break;
                case 5:
                    style = 'background: rgb(247,28,47);';
                    break;
                default:
                    style = 'background: rgb(92,105,141);';
            }
            return 'width:' + item.Width + '%;' + style;
        },
    },
    deactivated() {
        clearInterval(this.timer1);
        clearInterval(this.timer2);
        window.removeEventListener('resize', this.onresize, false);
        this.$tv.resetFindFocusType(); //this.$tv.findFocusType  = 1;
        this.$tv.resetScrollEl();
    },
    beforeRouteLeave(to, from, next) {
        clearInterval(this.timer1);
        clearInterval(this.timer2);
        window.removeEventListener('resize', this.onresize, false);
        this.$tv.resetFindFocusType(); //this.$tv.findFocusType  = 1;
        this.$tv.resetScrollEl();
        next()
    },
}
</script>

<style scoped lang="scss">
.motorFactory {
    background: url(~images/bigScreen/motorFactory/bg.png) no-repeat;
    background-size: cover;
    height: 1080px;
    width: 1920px;
    position: relative;
    overflow: hidden;

    .title {
        background: url(~images/bigScreen/motorFactory/header.png) no-repeat;
        background-size: cover;
        height: 81px;
        width: 1920px;
        display: flex;
        justify-content: center;
        padding: 6px 0;

        .timer {
            position: absolute;
            right: 156px;
            top: 20px;
            font-size: 20px;
            color: #fff;
            font-family: 'digifacewide';
            span{
                font-size: 20px;
            }
        }

        .laugBox {
            position: absolute;
            right: 10px;
            top: 14px;
            background: rgb(2, 25, 49);
            padding: 5px;
            cursor: pointer;

            .changeLau {
                background: url(~images/bigScreen/motorFactory/lauBox.png) no-repeat;
                background-size: cover;
                height: 37px;
                width: 120px;
                padding: 0 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid rgba(255, 0, 0, 0);

                span {
                    color: #fff;
                    font-size: 16px;
                }
            }
        }

        .logo {
            background: url(~images/bigScreen/motorFactory/logo.png) no-repeat;
            background-size: cover;
            width: 106px;
            height: 54px;
            position: absolute;
            left: 10px;
            // top: 35px;
        }

        .content {
            font-size: 32px;
            span{
                font-size: 32px;
            }
            font-weight: bold;
            line-height: 36px;
            letter-spacing: 8px;
            color: #fff;
            text-shadow: 1px 1px 1px #fff;
        }

        .encontent {
            font-size: 32px;
            span{
                font-size: 32px;
            }
            font-weight: bold;
            line-height: 68px;
            color: #fff;
            text-shadow: 1px 1px 1px #fff;
        }
    }

    .content {
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .leftCol {
            background: rgb(0, 32, 60);
            width: 267px;
            height: 968px;

            .changeIcon {
                background: url(~images/bigScreen/motorFactory/devTitle.png) no-repeat;
                width: 267px;
                height: 63px;
                background-size: cover;
                display: flex;
                justify-content: space-around;
                align-items: center;
                color: #fff;

                .icontext {
                    font-size: 20px;
                }

                .icontext1 {
                    cursor: pointer;
                    font-size: 30px;
                }
            }

            .list {
                height: 905px;
                overflow: scroll;

                &::-webkit-scrollbar {
                    width: 0px;
                    height: 20px;
                }

                .devItem {
                    background: url(~images/bigScreen/motorFactory/uncheck.png) no-repeat;
                    background-size: cover;
                    width: 219px;
                    height: 86px;
                    margin: 22px auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    .machine {
                        font-size: 16px;
                        span{
                            font-size: 16px;
                        }
                        color: #fff;
                    }
                }

                .devItemCheckHong {
                    background: url(~images/bigScreen/motorFactory/checkHong.png) no-repeat;
                }

                .devItemCheck {
                    background: url(~images/bigScreen/motorFactory/check.png) no-repeat;
                }

                .devItemCheckHong, .devItemCheck {
                    background-size: cover;
                    width: 219px;
                    height: 86px;
                    margin: 22px auto;
                }

            }

        }

        .rightCol {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            width: 1608px;
            height: 968px;

            .smallBox {
                width: 526px;
                height: 314px;
                background: rgb(0, 32, 60);
                padding: 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .boxtitle {
                    width: 100%;
                    height: 40px;
                    display: flex;
                    justify-content: space-between;

                    .chinese {
                        color: #fff;
                        font-size: 20px;
                    }

                    .titleIcon {
                        display: flex;
                        flex-direction: column;

                        .iconContent {
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;

                            span {
                                color: rgb(192, 232, 255);
                                font-size: 16px;
                                margin-right: 10px;
                            }

                        }

                        .iconytd {
                            span {
                                color: #fff;
                                font-size: 14px;
                            }
                        }
                    }
                }

                .oneBox {
                    width: 100%;
                    height: 36%;
                    background: rgb(3, 43, 77);
                    display: flex;
                    justify-content: space-around;

                    .updownitem {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        img {
                            position: relative;
                            top: -20px;
                        }

                        .upitem {
                            font-size: 14px;
                            color: rgb(142, 206, 232);
                            line-height: 30px;
                        }

                        .downitem {
                            font-size: 20px;
                            color: #fff;
                            text-shadow: 1px 1px 1px #fff;
                        }

                        .shuitem {
                            width: 2px;
                            height: 60px;
                            background: rgb(24, 64, 101);
                        }

                        .upitem1 {
                            font-size: 20px;
                            color: #fff;
                            line-height: 40px;
                        }

                        .downitem1 {
                            font-size: 14px;
                            color: #fff;
                            line-height: 30px;
                        }
                    }
                }

                .twoBox {
                    width: 100%;
                    height: 60%;
                    background: rgb(3, 43, 77);
                    padding: 10px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .shubox {
                        span {
                            writing-mode: vertical-rl;
                            font-size: 20px;
                            color: rgb(142, 206, 232);
                        }
                    }

                    .shubox1 {
                        span {
                            font-size: 20px;
                            color: rgb(142, 206, 232);
                        }
                    }

                    .hengbox {
                        span {
                            font-size: 20px;
                            color: #fff;
                        }
                    }

                    .hengbox1 {
                        span {
                            font-size: 20px;
                            color: rgb(142, 206, 232);
                        }
                    }

                    .singleImg {
                        background: url(~images/bigScreen/motorFactory/numBox.png) no-repeat;
                        background-size: cover;
                        height: 64px;
                        width: 41px;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        align-items: center;

                        span {
                            font-size: 50px;
                            color: rgb(0, 174, 248);
                            font-family: 'longzhoufeng';
                        }
                    }
                }

                .chartBox {
                    width: 100%;
                    height: 264px;
                    // background: rgb(3,43,77);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .singleBox {
                        height: 100%;
                        width: 49%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .singleprogress {
                            .procontent {
                                display: flex;
                                justify-content: space-between;

                                span {
                                    font-size: 14px;
                                    color: rgb(200, 200, 200);
                                }
                            }
                        }
                    }

                    .leftBox {

                        background: url(~images/bigScreen/motorFactory/circlebg.png) no-repeat;
                        background-size: cover;
                        width: 239px;
                        height: 195px;
                    }
                }

                .sectionBox {
                    width: 100%;
                    height: 40px;

                    .boxBorder {
                        width: 100%;
                        height: 20px;
                        border: 1px solid rgb(161, 161, 161);
                        padding: 3px 5px;
                        display: flex;

                        .initChart {
                            height: 100%;
                            float: left;
                            z-index: 1;
                        }
                    }

                    .boxTime {
                        display: flex;
                        justify-content: space-between;

                        span {
                            font-size: 14px;
                            color: rgb(161, 161, 161);
                        }
                    }
                }

                .chartBox1 {
                    width: 100%;
                    height: 186px;
                }
            }

            .bigBox {
                width: 1067px;
                height: 314px;
                background: rgb(0, 32, 60);
                padding: 15px 0px 15px 15px;
                display: flex;
                justify-content: space-between;

                .edgeBox1 {
                    height: 100%;
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .downcollect {
                        background: url(~images/bigScreen/motorFactory/collectbg.png) no-repeat;
                        background-size: cover;
                        // width: 318px;
                        height: 180px;
                        overflow: scroll;

                        &::-webkit-scrollbar {
                            width: 0px;
                            height: 0px;
                        }

                        .singlecolImg {
                            background: url(~images/bigScreen/motorFactory/collectsingle.png) no-repeat;
                            background-size: cover;
                            height: 28px;
                            margin-left: 8px;
                            margin-top: 4px;
                            padding: 0 30px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: rgb(192, 192, 192);
                            font-size: 14px;
                          .singleKeyL,.singleKeyR{
                            display: inline-block;
                            width: 50%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                          }
                          .singleKeyL{
                            text-align: left;
                          }
                          .singleKeyR{
                            text-align: right;
                          }
                        }
                    }

                    .upcollect {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .imgBox {
                            display: inline-block;
                            width: 90px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .uptitle {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            align-content: space-between;
                            height: 70px;

                            .uptitleup {
                                color: #fff;
                                font-size: 18px;
                            }

                            .uptitledown {
                              cursor: pointer;
                                color: rgb(0, 169, 246);
                                font-size: 24px;
                              display: inline-block;
                              width: 120px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              white-space: nowrap;
                            }
                        }
                    }
                }

                .edgeBox {
                    height: 100%;
                    width: 22%;
                  .standardBeat{
                    width: 100%;
                    height: 48px;
                    background: rgba(7, 68, 119, 0.2);
                    .label{
                      font-size: 15px;
                      font-weight: 500;
                      color: #91D4F3;
                      line-height: 48px;
                      padding-left: 11px;
                    }
                    .txt{
                      font-size: 21px;
                      font-weight: 600;
                      color: #FFFFFF;
                      line-height: 48px;
                      text-shadow: 0px 1px 4px #14A1F8;
                      vertical-align: middle;
                      padding: 0 9px;
                    }
                    .unit{
                      font-size: 15px;
                      font-weight: 600;
                      color: #FFFFFF;
                      line-height: 48px;
                      text-shadow: 0px 1px 4px #14A1F8;
                    }
                  }

                    .classOeeBox {
                        width: 100%;
                        height: 60%;
                        // background: rgb(3,43,77);
                    }

                    .apqloss {
                        width: 100%;
                        height: 40%;

                        .apqtitle {
                            text-align: center;
                            font-size: 20px;
                            color: rgb(159, 208, 236);
                            line-height: 40px;
                        }

                        .apqBox {
                            display: flex;
                            justify-content: space-around;

                            .apqsingle {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .apqname {
                                    font-size: 20px;
                                    color: rgb(159, 208, 236);

                                }

                                .apqnum {
                                    font-size: 20px;
                                    color: #fff;
                                    text-shadow: 1px 1px 1px #fff;
                                }
                            }
                        }
                    }
                }

                .centerBox {
                    height: 100%;
                    width: 53%;
                    background: rgb(3, 43, 77);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .imgBox {
                        display: block;
                        width: 100%;
                        height: 100%;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}
.faultMessage{
 color: red;
  position: absolute;
  bottom: 2px;
}
</style>

<style lang="scss">
.motorFactory {
    .focus {
        transform: scale(1.05);
        border: 1px solid #fff !important;
        box-shadow: 0 0 20px #fff;
    }

    .ivu-progress-inner {
        background-color: rgb(4, 53, 76)
    }
}
</style>
